<template>
  <div class="topTen main-body">
    <h2>
      <i class="iconfont icontoptenbands_icon_king" />
      <em class="blue-text">十大</em>品牌 • Top Ten Bands
    </h2>
    <div class="topTenBox">
      <h3>
        {{ topTen }}
      </h3>
      <ul class="clearfix">
        <!-- <li v-for="(item, index) in lists" :key="index">
          <img :src="item" alt="">
        </li> -->
        <li>
          <div class="imgTop">
            <img src="../../../assets/img/home/top ten _bg_yi.png" alt="">
          </div>
        </li>
        <li>
          <div class="imgTop">
            <img src="../../../assets/img/home/top ten _bg_er.png" alt="">
          </div>
        </li>
        <li>
          <div class="imgTop">
            <img src="../../../assets/img/home/top ten _bg_san.png" alt="">
          </div>
        </li>
        <li>
          <div class="imgTop">
            <img src="../../../assets/img/home/top ten _bg_si.png" alt="">
          </div>
        </li>
        <li>
          <div class="imgTop">
            <img src="../../../assets/img/home/top ten _bg_wu.png" alt="">
          </div>
        </li>
        <li>
          <div class="imgTop">
            <img src="../../../assets/img/home/top ten _bg_liu.png" alt="">
          </div>
        </li>
        <li>
          <div class="imgTop">
            <img src="../../../assets/img/home/top ten _bg_qi.png" alt="">
          </div>
        </li>
        <li>
          <div class="imgTop">
            <img src="../../../assets/img/home/top ten _bg_ba.png" alt="">
          </div>
        </li>
        <li>
          <div class="imgTop">
            <img src="../../../assets/img/home/top ten _bg_jiu.png" alt="">
          </div>
        </li>
        <li>
          <div class="imgTop">
            <img src="../../../assets/img/home/top ten _bg_shi.png" alt="">
          </div>
        </li>
        <li>
          <div class="imgTop">
            <img src="../../../assets/img/home/1.png" alt="">
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopTen',
  data() {
    return {
      topTen: '本年度最牛的十大品牌',
      lists: [
        {
          src: '../../../assets/img/home/top ten _bg_yi.png'
        },
        {
          src: '../../../assets/img/home/top ten _bg_er.png'
        },
        {
          src: '../../../assets/img/home/top ten _bg_san.png'
        },
        {
          src: '../../../assets/img/home/top ten _bg_si.png'
        },
        {
          src: '../../../assets/img/home/top ten _bg_wu.png'
        },
        {
          src: '../../../assets/img/home/top ten _bg_liu.png'
        },
        {
          src: '../../../assets/img/home/top ten _bg_qi.png'
        },
        {
          src: '../../../assets/img/home/top ten _bg_ba.png'
        },
        {
          src: '../../../assets/img/home/top ten _bg_jiu.png'
        },
        {
          src: '../../../assets/img/home/top ten _bg_shi.png'
        }
      ]
    }
  }
}
</script>

<style lang='scss' scoped>
  @import "../../../assets/template-item1/css/base.scss";
  .topTen{
    @include panel;
    .topTenBox{
      background: url('../../../assets/img/home/top ten bands_bg_heibeijing.png') no-repeat;
      width: 100%;
      height: 358px;
      margin-top: 20px;
      h3{
        text-align: center;
        // width:360px;
        // height:48px;
        font-size:36px;
        line-height:125px;
        color:rgba(250,232,182,1);
      }
      ul{
        margin: 0 82px;
        li{
          float: left;
          margin: 0 15px 15px 0;
        }
        li:nth-child(6){
          margin-right: 0px;
        }
        li:nth-child(11){
          margin-right: 0px;
          img{
            width: 336px;
            height: 100px;
          }
        }
        .imgTop{
          height: 90px;
          img{
            height: 100%;
          }
        }
      }
    }
  }
</style>

